<template>
  <div class="register">
    <el-dialog width="400px" :visible.sync="dialogVisible">
      <img src="../../static/images/login01.png" alt="" />
      <el-form :model="form">
        <el-form-item>
          <el-select
            v-model="form.region"
            placeholder="+86"
            style="width: 20%"
            size="mini"
            icon="el-icon-plus"
          >
            <el-option label="+86" value="shanghai"></el-option>
          </el-select>
          <el-input
            v-model="phone"
            placeholder="请输入手机号"
            style="width: 80%"
            size="mini"
          ></el-input>
          <el-input
            placeholder="请设置登录密码"
            show-password
            size="mini"
            v-model="password"
          ></el-input>

          <span class="login-pswText"
            >密码8-20位,至少包含字母/数字/字符2种组合</span
          >
          <el-button style="width: 100%" type="danger" @click="goCodePage"
            >注 册</el-button
          >
        </el-form-item>
      </el-form>
      <div class="register-fengexian">-----------其他注册方式----------</div>
      <!-- 微信，qq登录等图标展示 -->
      <el-button
        circle
        class="register-btnCircle iconfont icon-weixin"
      ></el-button>
      <el-button
        circle
        class="register-btnCircle iconfont icon-weibo"
      ></el-button>
      <el-button circle class="register-btnCircle iconfont icon-QQ"></el-button>
      <el-button
        circle
        class="register-btnCircle iconfont icon-wangyiyunyinle"
      ></el-button>
      <!-- 同意条款 -->
      <div>
        <el-checkbox v-model="checkedTwo" class="tongyi"
          >同意《服务条款》</el-checkbox
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 注册页面
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/; //至少八位，且包含数字和字母
export default {
  name: "login",
  data() {
    return {
      dialogVisible: true, //控制dialog框的显示隐藏
      form: {
        region: "",
      },
      phone: "", //手机号信息
      password: "", //密码信息
      // checked: false, //是否选中
      checkedTwo: false,
    };
  },
  methods: {
    async goCodePage() {
      //校验信息
      if (!this.checkedTwo) {
        this.$message.error("请勾选规则谢谢配合");
        return;
      }
      if (this.phone.length !== 11) {
        this.$message.error("手机号输入不正确请重新输入");
        this.phone = "";
        this.password = "";
        return;
      }
      if (!reg.test(this.password)) {
        //说明密码验证错误
        this.$message.error("密码输入不正确请重新输入");
        this.phone = "";
        this.password = "";
        return;
      }
      //以下说明用户密码和手机号都输入格式正确
      //判断手机号是否被注册
      let { phone } = this;
      let res = await this.$API.register.isRegister(phone);
      console.log(res);
      if (res.hasPassword) {
        //说明账号已存在，被注册过
        this.$message.error("账号已被注册，请重新输入!");
        this.phone = "";
        this.password = "";
        return;
      } else {
        //跳转到发送验证码页面,并且携带params参数
        let { phone } = this;
        this.$router.history.push({
          name: "CodePage",
          params: {
            phone,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.register {
  width: 530px;
  text-align: center;
}
.login-pswText {
  float: left;
}
.register-btnCircle {
  margin: 0 30px;
}
.tongyi {
  margin-top: 20px;
}
.register-fengexian {
  margin-top: 30px;
  margin-bottom: 10px;
}
</style>